<template>
    <div ref="MapView" class="MapView">
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
        </div>
    </div>
</template>

<script>

import simpleMap from '../../components/simpleMap'
var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]

// 随机函数
function randomNum(min, max) {
    return parseFloat(Math.random() * (max - min + 1) + min, 10);
}

export default {
    data() {
        return {
            SenceMode: '3D',
        }
    },
    watch: {
        SenceMode(value) { map.SenceMode = value; },
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, { mapOptions: { senceMode: this.SenceMode } });
        map.addProviders(mapConfig);
        map.flytochina();
        var viewer = map.getViewer();

        var bounds = {
            west: 70.0, south: 26.0, east: 140.0, north: 60.0
        };

        // init heatmap
        let heatMap = CesiumHeatmap.create(
            viewer, // your cesium viewer
            bounds, //矩形面积
            {
                backgroundColor: "rgba(0,0,0,0)",
                radius: 50,
                maxOpacity: .5,
                minOpacity: 0,
                blur: .75
            }
        );

        // 动态格式 [{x: -97.6433525165054, y: 45.61443064377248, value: 11.409122369106317}]
        function getData(length) {
            var data = [];
            for (var i = 0; i < length; i++) {
                var x = randomNum(70, 140);
                var y = randomNum(26, 60);
                var value = randomNum(0, 100);
                data.push({ x: x, y: y, value: value });
            }
            return data;
        }

        let valueMin = 0;
        let valueMax = 100;

        // add data to heatmap
        heatMap.setWGS84Data(valueMin, valueMax, getData(1000));



    },
    methods: {

    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
        map = null;
    }
}
</script>

<style>
.MapView {
    width: 100%;
    height: 100%;
}

.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>